<template>
  <div class="performance-center">
    <div id="rightTop2" @mouseenter="mouseHandle" @mouseleave="mouseLeaveHandle"></div>
     <pops ref="pop" pops="rightTop1"></pops>
  </div>
</template>

<script>
import {customerGetAll, getMonTB, getOpportunities, getPersonMonSale, getPersonMonTB} from "@/api/home";
import * as echarts from "echarts";
import pops from '@/views/components/pop/pops'
export default {
  data() {
    return {
      echarts1: null, //昨天产量
      timer: null, //循环定时器
      outTimer: null, //延迟定时
      index: 0, //索引
      allList: [], //所有的team内容
      list: [],
      stopScroll: true, // 轮播起止控制
      option: {
        legend: {
          show: false,
          top: 5,
          right: 0,
          itemWidth: 8,
          itemHeight: 8,
          icon: 'rect',
          padding: 0,
          textStyle: {
            color: 'rgba(184, 204, 255, 1)',
            fontSize: 12,
            padding: [0, 0, 0, 0]
          },
          data: [
            {
              name: '新增投标'
            }
          ]
        },
        color: 'rgba(255, 184, 1, 1)',
        grid: {
          top: '30px',
          bottom: '0px',
          left: '0px',
          right: '0px',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: "#ffffff",
            },
          },
        },
        xAxis: [
          {
            boundaryGap: true,
            type: 'category',
            data: [],
            axisLabel: {
              margin: 10,
              color: 'rgba(184, 204, 255, 1)',
              fontSize: 12,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0, 133, 255, 0.2)'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(39, 76, 129, 0.26)',
                width: 1
              }
            },
            axisTick: {
              show: false
            }
          }
        ],
        yAxis: {
          splitNumber: 5,
          axisLabel: {
            color: '#295296',
            show: true,
            fontSize: 12,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0, 133, 255, 0.2)'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#063073',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '新增投标',
            type: 'line',
            data: [],
            smooth: true,
            symbol: 'circle', // 数值点设定为实心点
            symbolSize: 8, // 折线的点的大小
            itemStyle: {
              lineStyle: {
                color: 'rgba(255, 184, 1, 1)', // 线的颜色
                width: 1 // 折线图线条粗细设置
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(255, 184, 1, 0.5)'
              },
                {
                  offset: 1,
                  color: 'rgba(0, 133, 255, 0)'
                }
              ], false)

            }
          },
        ]
      },
    };
  },
  components:{
    pops
  },
  async mounted() {
    await this.getDataList()
    this.initYesterChart();
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearTimeout(this.outTimer);
  },
  methods: {
    async getDataList() {
      //获取每月新增投标
      await getMonTB().then(res => {
        if (res.code === 200) {
          this.allList = res.data
          this.allList.forEach(item=>{
            item.mon = item.mon+'月'
          })
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    initYesterChart() {
      this.$nextTick(() => {
        clearInterval(this.timer);
        clearTimeout(this.outTimer);
        if (!this.echarts1) {
          this.echarts1 = this.$echarts.init(
              document.getElementById("rightTop2")
          );
        }
        this.echarts1.on('click',async (params)=> {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          let obj = {
            name: '',
            seriesName: `${params.name}投标统计`,
            arr:[]
          }
          await getPersonMonTB({mon:params.name.slice(0,1)*1}).then(res=>{
            if(res.code === 200){
              obj.arr = res.data
              loading.close();
            }
          })
          this.$refs.pop.getShow(obj)
        });
        this.tabChangeData();
        // 置换数据
        this.$nextTick(() => {
          this.echarts1.setOption(this.option);
        });
        this.timer = setInterval(() => {
          if (this.list.length < 5) {
            //截取的数组长度小于5时取消轮播
            this.stopScroll = false;
            clearInterval(this.timer);
            this.list = this.allList.slice(-5); //截取最后5条
            this.outTimer = setTimeout(() => {
              this.index = 0; //索引从新置为0
              this.stopScroll = true;
            }, 1000);
          } else {
            if (this.list[this.list.length - 1] === this.allList[this.allList.length - 1]) {
              this.index = 0;
            }
          }
          this.tabChangeData();
          // 置换数据
          this.$nextTick(() => {
            this.echarts1.setOption(this.option);
          });
        }, 2000);
      });
    },
    tabChangeData() {
      if (this.stopScroll === true) {
        if (this.allList.length > 5) {
          this.list = this.allList.slice(this.index, 5 + this.index); //截取5条
          this.index++;
        } else {
          this.list = this.allList.slice(0, 5);
        }
      }
      this.option.xAxis[0].data = this.list.map(obj => obj.mon)
      this.option.series[0].data = this.list.map(obj => obj.itemAmount)
    },
    mouseHandle() {
      this.stopScroll = false;
    },
    mouseLeaveHandle() {
      this.stopScroll = true;
    }
  },
};
</script>
<style lang="scss" scoped>
.performance-center {
  position: relative;
  width: 100%;
  height: 100%;

  #rightTop2 {
    width: 100%;
    height: 100%;
  }
}
</style>
